<script setup>
import { useToggle } from '@vueuse/core'
import { onMounted } from 'vue';
const status = ref(false);
const changeFontFamily = () => {
  useToggle(status);
}

onMounted(()=> {
  document.body.style.backgroundColor = 'transparent'
})
</script>

<template>
  <div class="clock" :class="'font_'+status">
    <Clock @mouse="changeFontFamily"/>
  </div>
</template>

<style lang="less" scoped>
.clock {
  width: 100vw;
  height: 100vh;
  -webkit-app-region: drag;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
</style>